<template>
	<view>
		<common-list :item="info" isdetail @doComment ="doComment"
		 @doShare = "doShare" @follow ="follow" @doSupport = "doSupport">
			<view>{{info.content}}</view>
			<view>
			<image v-for="(item,index) in info.images" :src="item.url" class="w-100" 
			mode="widthFix" @click="preview(index)" ></image>
			</view>
		</common-list>
		
		<divider></divider>
		<!-- 评论列表 -->
		<view class="p-2 font-md font-weight-bold " >
			最新评论3
		</view>
		
		<view class="px-2" >
		 <view class="uni-comment-list">
		     <view class="uni-comment-face">
		         <image src="/static/default.jpg" mode="widthFix"></image>
		     </view>			 
		     <view class="uni-comment-body">
		         <view class="uni-comment-top">
		             <text>小猫咪</text>
		         </view>
		         <view class="uni-comment-content">支持国产，支持DCloud!</view>
		         <view class="uni-comment-date">
		             <view>2天前</view>
		            <!-- <view class="uni-comment-replay-btn">5回复</view> -->
		         </view>
		     </view>   				  
		 </view>	
		</view>
	
		<!-- 发表评论 -->
		<view style="height:100rpx;" ></view>
		<bottom-input @submit ="submit"></bottom-input>	
		
		<!-- 收藏 分享 -->
		<uni-popup ref = "popup" type="bottom" >
			<view class="text-center py-2 font-md border-bottom border-light-secondary " >分享</view>
			<view class="flex align-center " >				
			<view class="flex-1 flex flex-column align-center justify-center py-2 " 
		  v-for="(value ,index) in providerList" :key = "index" hover-class="bg-light" @tap="share(value)">
				  <view class="iconfont bg-primary text-white flex align-center
				   justify-center font-lg rounded-circle" :class="value.icon + ' ' + value.color" style="width: 100rpx;height: 100rpx;  " ></view>
				   <text class="font-sm mt-1 text-muted " >{{value.name}}</text>
				</view>										
			</view>			
			<view class="text-center py-2 font-md border-bottom border-light-secondary" >取消</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonList from "@/components/common/common_list.vue"
	import bottomInput from "@/components/common/bottom-input.vue"
	import uniPopup from "@/components/uni_ui/uni-popup/uni-popup.vue"
	export default {
		components:{
			commonList,
			bottomInput,
			uniPopup
		},
		data() {			
			return {
				title: 'share',
				shareText: 'uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！',
				href:"https://uniapp.dcloud.io",
				image: '',
				shareType:1,
				providerList:[],
			//当前帖子信息
			    info:{
					userpic:'/static/default.jpg',
					username:'昵称',
					txt_time:'2019-10-20 下午04:30',
					isFollow:false,
					txt:'今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心今天跟爸妈吵了一架，原来父母对子女也是那么可以字字诛心',
					txt_pic:'/static/demo/datapic/11.jpg',
					support:{
							 type:"support",
							 support_count:1,
							 unsupport_count:2
					},
					comment_count:2,
					share_num:2,
					content:"我今天心情不是很好，以后的每一天都得认真 严肃干活每一件事情；我今天心情不是很好，以后的每一天都得认真,严肃干活每一件事情；",
			     	images:[{
						url:"https://tw-1253577751.cos.ap-chengdu.myqcloud.com/images/21/2020/04/Ni4yP3Hd5SQ4UCqS3duuSySDz7Y07z.jpg"
					},{
						url:"https://tw-1253577751.cos.ap-chengdu.myqcloud.com/images/21/2020/04/VF49x0ezDmz6GIBBZ4z94I4FdI0d00.jpg"
					}]
					    
					}
			
			  }
		},
		onLoad(e) {
			//console.log(e.detail)
			if(e.detail){
				this.__init(JSON.parse(e.detail))
			}
			//分享方法
			uni.getProvider({
				service: 'share',
				success: (e) => {
					console.log(e)
					//console.log('success', e);
					let data = []
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									icon:"icon-iconfontzhizuobiaozhunbduan32",
									color:"bg-success",
									name: '微信好友',
									id: 'weixin',
									sort:0
								})
								data.push({
									icon:"icon-pengyouquan",
									color:"bg-dark",
									name: '朋友圈',
									id: 'weixin',
									type:'WXSenceTimeline',
									sort:1
								})
								break;
							case 'sinaweibo':
								data.push({
									icon:"icon-89",
									color:"bg-danger",
									name: '新浪微博',
									id: 'sinaweibo',
									sort:2
								})
								break;
							case 'qq':
								data.push({
									icon:"icon-qq",
									color:"bg-primary",
									name: 'QQ好友',
									id: 'qq',
									sort:3
								})
								break;
							default:
								break;
						}
					}
				   
					this.providerList = data.sort((x,y) => {
						return x.sort - y.sort
					});
				}
			  })
		},
		computed:{
			imagesList(){
				return this.info.images.map(item=>{
					return item.url
				})		
			},
			//分享
			isDisableButton() {
				return function(item) {
					if(this.shareType === 0 && item.id === 'qq'){
						return true;
					}
					if(this.shareType === 5 && item.name !== '分享到微信好友'){
						return true;
					}
					return false;
				}
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareText ? this.shareText : "欢迎体验uni-app",
				path: '/pages/tabBar/component/component',
				imageUrl:this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
			}
		},
		beforeDestroy(){
			this.shareText='uni-app可以同时发布成原生App、小程序、H5，邀请你一起体验！',
			this.href = 'https://uniapp.dcloud.io',
			this.image='';
		},
		//监听原生图标按钮
		onNavigationBarButtonTap() {
			this.$refs.popup.open()
		},
		onBackPress() {
			this.$refs.popup.close()
		},
		methods: {
			async share(e) {
				console.log('分享通道:'+ e.id +'； 分享类型:' + this.shareType);
				
				if(!this.shareText && (this.shareType === 1 || this.shareType === 0)){
					uni.showModal({
						content:'分享内容不能为空',
						showCancel:false
					})
					return;
				}
				
				if(!this.image && (this.shareType === 2 || this.shareType === 0)){
					uni.showModal({
						content:'分享图片不能为空',
						showCancel:false
					})
					return;
				}
				
				let shareOPtions = {
					provider: e.id,
					scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' : 'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
					type: this.shareType,
					success: (e) => {
						console.log('success', e);
						uni.showModal({
							content: '已分享',
							showCancel:false
						})
					},
					fail: (e) => {
						console.log('fail', e)
						uni.showModal({
							content: e.errMsg,
							showCancel:false
						})
					},
					complete:function(){
						console.log('分享操作结束!')
					}
				}
				
				switch (this.shareType){
					case 0:
						shareOPtions.summary = this.shareText;
						shareOPtions.imageUrl = this.image;
						shareOPtions.title = '欢迎体验uniapp';
						shareOPtions.href = 'https://uniapp.dcloud.io';
						break;
					case 1:
						shareOPtions.summary = this.shareText;
						break;
					case 2:
						shareOPtions.imageUrl = this.image;
						break;
					case 5:
						shareOPtions.imageUrl = this.image ? this.image : 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
						shareOPtions.title = '欢迎体验uniapp';
						shareOPtions.miniProgram = {
							id:'gh_33446d7f7a26',
							path:'/pages/tabBar/component/component',
							webUrl:'https://uniapp.dcloud.io',
							type:0
						};
						break;
					default:
						break;
				}
				
				if(shareOPtions.type === 0 && plus.os.name === 'iOS'){//如果是图文分享，且是ios平台，则压缩图片 
					shareOPtions.imageUrl = await this.compress();
				}
				if(shareOPtions.type === 1 && shareOPtions.provider === 'qq'){//如果是分享文字到qq，则必须加上href和title
					shareOPtions.href = 'https://uniapp.dcloud.io';
					shareOPtions.title = '欢迎体验uniapp';
				}
				uni.share(shareOPtions);
			},
			compress(){//压缩图片 图文分享要求分享图片大小不能超过20Kb
				console.log('开始压缩');
				let img = this.image;
				return new Promise((res) => {
					var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
					console.log('after' + localPath);
					// 压缩size
					plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
						entry.file((file) => {// 可通过entry对象操作图片 
							console.log('getFile:' + JSON.stringify(file));
							if(file.size > 20480) {// 压缩后size 大于20Kb
								plus.zip.compressImage({
									src: img,
									dst: img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG'),
									width: '10%',
									height: '10%',
									quality: 1,
									overwrite: true
								}, (event) => {
									console.log('success zip****' + event.size);
									let newImg = img.replace('.jpg', '2222.jpg').replace('.JPG', '2222.JPG');
									res(newImg);
								}, function(error) {
									uni.showModal({
										content:'分享图片太大,需要请重新选择图片!',
										showCancel:false
									})
								});
							}
						});
					}, (e) => {
						console.log('Resolve file URL failed: ' + e.message);
						uni.showModal({
							content:'分享图片太大,需要请重新选择图片!',
							showCancel:false
						})
					});
				})
			},
			
			
			
			__init(data){
				//修改标题
				uni.setNavigationBarTitle({
					title:data.title
				})
				//请求api
			},
			
			
			//点击评论
			doComment(){
				
			},
			//点击分享
			doShare(){
				
			},
			//点击关注
			follow(){
				this.info.isFollow = true
				uni.showToast({
					title: '关注成功'
				});
			},
			//点赞
			doSupport(e){
				//之前操作过
				if (this.info.support.type === e.type){
					return uni.showToast({
						title:'你已经操作过了',
						icon:'none'
					});
				}
				let msg = e.type === 'support' ? '顶' : '踩'
				//之前没有操作过
			  if (this.info.support.type === ''){
				 this.info.support[e.type+'_count']++
			  }else if(this.info.support.type === 'support' && e.type === 'unsupport' ){
				 //顶-1
				 this.info.support.support_count--;
				 //踩+1
				 this.info.support.unsupport_count++;
			  }else if(this.info.support.type === 'unsupport' && e.type === 'support' ){
				  //顶-1
				  this.info.support.support_count++;
				  //踩+1
				  this.info.support.unsupport_count--;
			  }
			  this.info.support.type = e.type
			  uni.showToast({ title: msg + '成功'  });	
			},
		    //预览图片
			preview(index){
				uni.previewImage({
					current:index,
					urls:this.imagesList
				})
			},
			//提交评论
			submit(data){
				console.log(data);
			}
		}
	}
</script>

<style>

</style>
